import { StyleSheet, SafeAreaView, Platform, View, FlatList, Text } from 'react-native';
import PokemonCard from './components/PokemonCard';
import PokemonCardData from "./data/PokemonCardData.json";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
        <FlatList 
          data={PokemonCardData}
          renderItem={({item, index}) => <PokemonCard key={index} {...item}/>}
          keyExtractor={item => item.name}
          ItemSeparatorComponent={<View style={{ height: 16 }}/>}
          ListEmptyComponent={<Text style={ styles.listText }>Empty list!</Text>}
          ListHeaderComponent={<Text style={ styles.listText }>List Header</Text>}
          ListFooterComponent={<Text style={ styles.listText }>List Footer</Text>}
        />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    paddingTop: Platform.OS === "android" ? 20 : 0,
  },
  listText: {
    fontSize: 40,
    fontWeight: "bold",
    textAlign: "center"
  }
});
